<template>
  <header>
    <nut-swiper
      :auto-play="3000"
      pagination-visible
      pagination-color="#426543"
      pagination-unselected-color="#808080"
    >
      <nut-swiper-item v-for="(item, index) in store.banners" :key="index" style="height: 150px">
        <img :src="cfg.imageUrl(item.cover)" style="height: 100%; width: 100%" draggable="false" />
      </nut-swiper-item>
    </nut-swiper>
  </header>
  <section class="hasMainbar">
    <nut-divider />
    <nut-noticebar :text="store.notice" />
    <nut-divider />
    <nut-grid :column-num="2">
      <nut-grid-item v-for="(item, index) in store.lessons" :key="index">
        <LessonItemCard :data="item" />
      </nut-grid-item>
    </nut-grid>
  </section>
  <MainBar />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useHomeStore } from '@/stores/home'
import cfg from '@/config/config'
import LessonItemCard from '@/components/lesson/index.vue'
import MainBar from '@/components/mainbar/index.vue'

const store = useHomeStore()
onMounted(() => store.loadHome())
</script>
